<template>
  <div class="login_index h-screen w-[100%] flex justify-center overflow-hidden items-center flex-col">
    <div class="h-[540px] flex rounded-[10px] overflow-hidden">
      <div class="bg-[#0079ff] bg-opacity-80 w-[370px] h-[100%] pl-[45px] pt-[70px] text-[#fff]">
        <img src="@/assets/images/login_logo.png" alt="" class="login_title" />
        <div class="text-[22px] mt-[20px]">智慧电竞酒店saas管理系统</div>
        <div class="bg-[#add3ff] w-[112px] h-[8px] rounded-[4px] mt-[30px] mb-[40px]"></div>
        <div class="text-[22px] mb-[15px]">Hi，您好！</div>
        <div class="text-[22px]">欢迎进入领住云酒店管理系统</div>
      </div>
      <div class="bg-[#fff] w-[490px] h-[100%] pt-[70px] px-[60px]">
        <div class="text-[22px] text-[#2d3347] font-bold mb-[10px]">欢迎登录</div>
        <div class="text-[16px] text-[#2d3347]">酒店管理系统前台端</div>
        <!-- <a-input v-model:value="form.shop_id" placeholder="请输入酒店ID">
          <template #prefix>
            <img src="@/assets/images/login_id.png" alt="" srcset="" />
          </template>
        </a-input> -->
        <a-input v-model:value="form.name" placeholder="请输入账号">
          <template #prefix>
            <img src="@/assets/images/login_account.png" alt="" srcset="" />
          </template>
        </a-input>
        <a-input-password v-model:value="form.pwd" @keydown.enter="toLogin" placeholder="请输入密码">
          <template #prefix>
            <img src="@/assets/images/login_pass.png" alt="" srcset="" />
          </template>
        </a-input-password>
        <a-button type="primary" @click="toLogin" :loading="loading">登录</a-button>
      </div>
    </div>
    <div class="text-[#a3cfff] text-[14px] absolute bottom-[25px]">
      <span>copyright2012-2020Yungengxin.All Rights Reserverd..成都领沃网络技术有限公司 版权所有</span>
      <span class="mx-[10px]">|</span>
      <span> 蜀ICP备16035996号-9</span>
    </div>
  </div>  
</template>
<script lang="ts" setup>
import { login } from '@/http/api/login';
import { iReqLogin } from '@/interface/login';
import { useUserInfo } from '@/store/user';

import { msgModal } from '@/utils/ui';
import md5 from 'js-md5';
import { useRouter } from 'vue-router';
const user = useUserInfo();
const router = useRouter();
const form = reactive<iReqLogin>({
  name: '',
  pwd: '',
  shop_id: '',
});
const loading = ref<boolean>();

// watch(
//   () => form,
//   (newVal: any) => {
//     setTimeout(() => {
//       if (newVal.name && newVal.pwd) {
//         loginClass.value = 'doBtn';
//       } else {
//         loginClass.value = 'undoBtn';
//       }
//     }, 100);
//   },
//   { deep: true }
// );
const toLogin = async () => {
  try {
    loading.value = true;
    const res = await login(
      Object.assign(
        {},
        {
          ...form,
          pwd: md5(form.pwd),
        }
      )
    );
    user.setUserInfo(res.data);
    loading.value = false;
    router.replace({ path: '/welcome' });
  } catch (error) {
    console.log('error:', error);
    loading.value = false;
    msgModal({ msg: (error as any).msg, type: 'error' })
    form.pwd = '';
  }
};
</script>
<style lang="less" scoped>
.login_index {
  background: url('@/assets/images/login_bg.png') center center no-repeat;
  background-size: 100% 100%;
}

.ant-input-affix-wrapper,
.ant-input-password {
  height: 50px;
  margin-top: 28px;
}

:deep(.ant-input) {
  font-size: 16px;
  line-height: 56px;
}

:deep(.ant-input-prefix) {
  margin-right: 15px !important;
}

.ant-btn {
  margin-top: 30px;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  color: #ffffff;
  border-radius: 4px;
  font-size: 24px;
  border: none;
}

.undoBtn {
  background-color: #b0d5ff;
}

.doBtn {
  background-color: #0079ff;
}
</style>
